<template>
<!-- 索引栏 -->
  <div style="height: 100%;overflow: auto;">
    <!-- BUG: 颜色高亮异常；  解决：取消高亮。。。 使用highlight-color属性 -->
    <van-index-bar :sticky="false" 
        :index-list="indexLists" highlight-color="#2c3e50" @select="clickBar"> 
        <div v-for="data in citiesList" :key="data.type">
            <van-index-anchor :index="data.type">{{data.type}}</van-index-anchor>
            <van-cell :title="item.name"  @click="tarnsmit(item.name,item.cityId)"
                v-for="item in data.list"  :key="item.cityId" />
        </div>
    </van-index-bar>
  </div>
</template>

<script>
import http from '@/util/http'
import obj from '@/util/mixinObj'

import { Toast } from 'vant';
export default {
    mixins: [obj],
    data(){
        return { 
            citiesList: []
        }
    },
    // 计算属性
    computed:{
        indexLists(){
            if(this.citiesList.length > 0){
                return this.citiesList.map(item=>item.type)
                // return ['A','B','C','D','E','F']
            }
        }
    },
    mounted(){
         http({
                url:`/gateway?k=4095379`,
                headers:{
                   'X-Host':'mall.film-ticket.city.list'
                }
            }).then(res => {
                // console.log(res.data.data.cities);
                // console.log("影院数据获取成功");
                this.citiesdp(res.data.data.cities)
            })
    },
    methods:{
        clickBar(data){
            // console.log(data);
           Toast(data);
        },
         // 对vuex中的公共资源进行修改，修改为选择的城市
        tarnsmit(name,id){
            // 不建议如下这样直接修改vuex中的数据，这样不方便测试和找BUG
            // this.$store.state.citiesName = name;
        
            // 这样通过index文件中的方法进行更改
            this.$store.commit("changeName",name)
            this.$store.commit("changeID",id)
            // 将该变量变为true
             this.$store.commit("changeCity")
            // 返回上一页
            this.$router.back()
        },
        // 数据处理，放到this.citiesList中
        citiesdp(data){
            // 创造一个A-Z字母的数组
            var zimu = [];
            var rowList = [];
            for(var i=65;i<91;i++){
                zimu.push(String.fromCharCode(i))
            }
            
            zimu.forEach((row)=>{
                data.filter((item)=>{
                    if(item.pinyin[0].toUpperCase() === row){
                        rowList.push(item)
                    }
                })
                rowList.length>0 && this.citiesList.push({
                    type: row,
                    list: rowList
                })
                rowList = [];
            })
            // console.log(this.citiesList);
        }
    }
}
</script>

<style lang="scss">
.van-index-bar__sidebar {
    position: absolute;
    right: 1rem;
    z-index: 2;
}
.van-toast--html, .van-toast--text{
    min-width: 10px;
    border-radius: 25px;
    width: 12px;
}

</style>